<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>My test page</title>
    <!-- 添加样式 -->
    <style>form {
        /* 居中表单 */
        margin: 0 auto;
        width: 400px;
        /* 显示表单的轮廓 */
        padding: 1em;
        border: 1px solid #ccc;
        border-radius: 1em;
    }

    ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    form li + li {
        margin-top: 1em;
    }

    label {
        /* 确保所有 label 大小相同并正确对齐 */
        display: inline-block;
        width: 90px;
        text-align: right;
    }

    input,
    textarea {
        /* 确保所有文本输入框字体相同
           textarea 默认是等宽字体 */
        font: 1em sans-serif;

        /* 使所有文本输入框大小相同 */
        width: 300px;
        box-sizing: border-box;

        /* 调整文本输入框的边框样式 */
        border: 1px solid #999;
    }

    input:focus,
    textarea:focus {
        /* 给激活的元素一点高亮效果 */
        border-color: #000;
    }

    textarea {
        /* 使多行文本输入框和它们的 label 正确对齐 */
        vertical-align: top;

        /* 给文本留下足够的空间 */
        height: 5em;
    }

    .button {
        /* 把按钮放到和文本输入框一样的位置 */
        padding-left: 90px; /* 和 label 的大小一样 */
    }

    button {
        /* 这个外边距的大小与 label 和文本输入框之间的间距差不多 */
        margin-left: 0.5em;
    }
    </style>
</head>

<body>
<p>This is my page</p>
<!--
action 属性定义了在提交表单时，应该把所收集的数据送给谁（URL）去处理。
method 属性定义了发送数据的 HTTP 方法（通常是 get 或 post）。 -->
<!-- action地址需要自己开一个服务 -->
<form action="http://localhost:8080/web-form-page" method="post">
    <ul>
        <li>
            <label for="name">Name:</label>
            <input type="text" id="name" name="user_name">
        </li>
        <li>
            <label for="mail">E-mail:</label>
            <input type="email" id="mail" name="user_email">
        </li>
        <li>
            <label for="msg">Message:</label>
            <textarea id="msg" name="user_message"></textarea>
        </li>
        <li class="button">
            <button type="submit">Send your message</button>
        </li>
    </ul>
</form>
</body>

</html>